<template>
  <el-card>
    <template #header>
      <el-row justify="space-between" align="middle">
        <el-col :span="12" style="font-size: 35px;color: #3f87f8;text-align: left">影厅列表</el-col>
        <el-col :span="12" style="text-align: right;">
          <el-button type="primary" size="large" :icon="Plus" @click="handleAdd">创建</el-button>
        </el-col>
      </el-row>
    </template>
    <el-table :data="hallList" stripe style="width: 100%" v-loading="loading">
      <el-table-column align="center" type="expand">
        <template #default="props">
          <el-descriptions :border="true" :column="5">
            <el-descriptions-item label="影厅描述">{{ props.row.movieHall.hallDescription }}</el-descriptions-item>
            <el-descriptions-item label="列">{{ props.row.seatTable.cols }}</el-descriptions-item>
            <el-descriptions-item label="行">{{ props.row.seatTable.rows }}</el-descriptions-item>
            <el-descriptions-item label="创建时间">{{ props.row.movieHall.createAt }}</el-descriptions-item>
            <el-descriptions-item label="更新时间">{{ props.row.movieHall.updateAt }}</el-descriptions-item>
            <el-descriptions-item label="座位详情">
              <ZzjSeatTable :seat-table="props.row.seatTable"></ZzjSeatTable>
            </el-descriptions-item>

          </el-descriptions>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="movieHall.hallId" label="编号"></el-table-column>
      <el-table-column align="center" prop="movieHall.hallName" label="名称"></el-table-column>
      <el-table-column align="center" prop="movieHall.hallDescription" label="描述"></el-table-column>
      <el-table-column align="center" prop="seatTable.totalCount" label="座位数"></el-table-column>
      <el-table-column fixed="right" align="right" width="200">
        <template #header>
          <el-input v-model="searchKey" size="small" placeholder="搜索影厅编号或名称">
            <template #append>
              <el-button :icon="Search" @click="handleSearch"/>
            </template>
          </el-input>
        </template>
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-popconfirm title="确定要删除此影厅吗?"
                         @confirm="handleDelete(scope.$index, scope.row)">
            <template #reference>
              <el-button
                  size="small"
                  type="danger">删除
              </el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        :hide-on-single-page="pageInfo.total/pageInfo.pageSize<=1"
        v-model:currentPage="pageInfo.pageNum"
        v-model:page-size="pageInfo.pageSize"
        :page-sizes="[5, 10, 20, 50]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageInfo.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"/>
  </el-card>

  <el-dialog @close="getHallList" top="5vh" width="660px" v-model="addDialogVisible"
             :close-on-click-modal="false" title="添加影厅">
    <ZzjMovieHallAddEdit :movie-hall-info="undefined"></ZzjMovieHallAddEdit>
  </el-dialog>
  <el-dialog @close="getHallList" top="5vh" width="660px" v-model="editDialogVisible"
             :close-on-click-modal="false" title="编辑影厅" :destroy-on-close="true">
    <ZzjMovieHallAddEdit :movie-hall-info="editMovieHallInfo"></ZzjMovieHallAddEdit>
  </el-dialog>
</template>

<script setup lang="ts">

import api from "../../../api/api";
import {onMounted, ref} from "vue";
import ZzjSeatTable from "../../../components/ZzjSeatTable.vue";
import {Plus, Search} from '@element-plus/icons-vue'
import ZzjMovieHallAddEdit from "./ZzjMovieHallAddEdit.vue";
import {ElMessage} from "element-plus";

const addDialogVisible = ref(false)
const editDialogVisible = ref(false)
const editMovieHallInfo = ref()
const searchKey = ref('')
const pageInfo = ref({
  pageSize: 10,
  pageNum: 1,
  total: 0
})
const loading =ref(false)


const hallList = ref()
onMounted(() => {
  getHallList()
})

const getHallList = () => {
  loading.value=true
  api.movieHall.getHallList({
    pageSize: pageInfo.value.pageSize,
    pageNum: pageInfo.value.pageNum,
    searchKey: searchKey.value
  }).then(res => {
    if (res.data.code == 0) {
      hallList.value = res.data.data.list
      pageInfo.value.total = res.data.data.count
    }
    loading.value=false
  })
}
const handleSizeChange = (val: number) => {
  pageInfo.value.pageSize = val
  getHallList()
}
const handleCurrentChange = (val: number) => {
  pageInfo.value.pageNum = val
  getHallList()
}
const handleAdd = () => {
  addDialogVisible.value = true
}
const handleEdit = (index: number, row: any) => {
  editMovieHallInfo.value = row
  editDialogVisible.value = true
}
const handleDelete = (index: number, row: any) => {
  api.movieHall.delMovieHall({
    hallId: row.movieHall.hallId
  }).then(res => {
    if (res.data.code == 0) {
      ElMessage.success("删除成功")
      getHallList()
    }
  })
}
const handleSearch = () => {
  getHallList()
}

</script>

<style scoped>


</style>